<template>
    <div id="mainbox">
                <img id="songimg" :src="img" alt="">
                 <router-link :to="{path:'/yunyin/white',query:{keyword:name}}"><h2 class="songtext" style="font-size: 28px;">{{name}}</h2> </router-link>
                 <router-link :to="{path:'/yunyin/white',query:{keyword:ar}}"><div class="songtext"> {{ar}}</div></router-link>
                <br>
                 <router-link :to="{path:'/yunyin/white',query:{keyword:al}}"><div class="songtext">所属专辑：{{al}}</div></router-link>
                <button class="songbutton" @click="getmusic"> <span class="playingico">&#xe60d; </span> 播 放</button>
                <span class="otherico">&#xe629; </span>
                <span class="otherico">&#xe626; </span>
                <span class="otherico">&#xe603; </span>
                <router-link :to="{path:'/yunyin/command',query:{keyword:$route.query.keyword}}"><span class="otherico">&#xe647; </span></router-link>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"songmes",
    data(){
        return{
            arr:'',
            text:'',
            asongid:'',
            name:'',
            ar:'',
            al:'',
            img:'',
            url:'',

        }
    },
    created:function(){
        this.loading();
    },
       mounted:function(){
         let that=this;
         that.asongid=that.$route.query.keyword;
         axios.get("http://39.101.203.189:3000/song/url?id=" +that.asongid ).then(function(response) {
                //  console.log(response.data.data[0].url)
                that.url=response.data.data[0].url;
                    }, function(err) {})
    },
    methods:{
        loading: function() {
                    let that = this;
                    that.asongid=that.$route.query.keyword;
                    // console.log( that.$route.query);
                    axios.get("http://39.101.203.189:3000/song/detail?ids=" +that.asongid ).then(function(response) {
                       let res=response.data.songs[0];
                       that.arr=res;
                       console.log(res.al.picUrl)
                       that.name=res.name;
                       that.ar=res.ar[0].name;
                       that.al=res.al.name;
                       that.img=res.al.picUrl;
                    }, function(err) {})
                },
                getmusic(){
                    let muname=this.name;
                    let muar=this.ar;
                    let muurl=this.url;
                    const mu={muname,muar,muurl};
                    this.$store.commit('getaudio',mu);
                    console.log(mu);
                },
                
                
                
    },
    // components:{

    // },

}
</script>

<style scoped> 
  #mainbox{
            position: absolute;
            left: 0px;
            width: 1200px;
            height: 570px;
        }
#songtext{
    background: none;
    border: none;
    width: 300px;
    color: aliceblue;
    font-weight: 400;
}
    /*  */

 
 #songimg {
     position: relative;
     top: 10px;
     left: 50px;
     min-width: 180px;
     min-height: 180px;
     max-width: 180px;
     max-height: 180px;
     color: aliceblue;
 }
 
 .songtext {
     position: relative;
     width: 300px;
     top: 30px;
     left: 50px;
     color: #fff;
     font-size: 18px;
     opacity: 0.9;
     font-weight: 300;
 }
 
 .songbutton {
     position: relative;
     width: 110px;
     height: 40px;
     top: 70px;
     left: 50px;
     background-color: #2c2324;
     color: #fff;
     font-size: 16px;
     outline: none;
     border-radius: 5px;
     border: none;
     font-weight: 600;
 }
 
 .playingico {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 500;
     cursor: default;
 }
 
 .otherico {
     position: relative;
     top: 140px;
     left: -60px;
     margin-right: 20px;
     font-family: "iconfont" !important;
     font-size: 24px;
     color: aliceblue;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 500;
     cursor: default;
 }
 
 #brief {
     position: relative;
     top: 50px;
     left: 350px;
     width: 320px;
     height: 120px;
     color: #fff;
     opacity: 0.9;
 }
</style>